<script>
import HomeTop from '@/components/HomeTop.vue'
import { newPage,jump } from '@/utils/commonFunction'
export default {
    components: {
        HomeTop,
    },
    data() {
        return {
        }
    },
    methods: {
        jump,
        newPage,
        toDetail(id){
            let url = `/getLicense/detailPage?id=${id}`;
            jump(url)
        }
    }
}
</script>
<template>
    <div class="home">
        <HomeTop style="position: sticky;top: 0; z-index: 99;" />
        <div class="home_main">
            <div class="item">
                <h3>园林绿化工</h3>
                <p @click="toDetail(1)">报考条件查询</p>
                <p @click="toDetail(2)">证书详细</p>
                <p @click="toDetail(3)">考试科目</p>
                <p @click="toDetail(25)">往年真题</p>
                <a href="https://kz.gzshanen.com/yejin/2141.html">报名网站</a>
            </div>
            <div class="item">
                <h3>盆景工证</h3>
                <p @click="toDetail(5)">报考条件查询</p>
                <p @click="toDetail(6)">证书详细</p>
                <p @click="toDetail(7)">考试科目</p>
                <p @click="toDetail(20)">往年真题</p>
                <a href="https://kz.gzshanen.com/laoxue/836.html">报名网站</a>
            </div>
            <div class="item">
                <h3>花卉园艺工证</h3>
                <p @click="toDetail(10)">报考条件查询</p>
                <p @click="toDetail(11)">证书详细</p>
                <p @click="toDetail(12)">考试科目</p>
                <p @click="toDetail(22)">往年真题</p>
                <a href="https://kz.gzshanen.com/laoxue/838.html">报名网站</a>
            </div>
            <div class="item">
                <h3>绿化工程师</h3>
                <p @click="toDetail(16)">报考条件查询</p>
                <p @click="toDetail(17)">证书详细</p>
                <p @click="toDetail(18)">考试科目</p>
                <p>往年真题</p>
                <a href="https://kz.gzshanen.com/zhongguanpei/2347.html">报名网站</a>
            </div>
            <div class="item">
                <h3>绿化工证</h3>
                <p @click="toDetail(9)">报考条件查询</p>
                <p @click="toDetail(19)">证书详细</p>
                <p @click="toDetail(18)">考试科目</p>
                <p @click="toDetail(23)">往年真题</p>
                <a href="https://kz.gzshanen.com/laoxue/834.html">报名网站</a>
            </div>
            <div class="item">
                <h3>花卉工证</h3>
                <p @click="toDetail(10)">报考条件查询</p>
                <p @click="toDetail(11)">证书详细</p>
                <p @click="toDetail(12)">考试科目</p>
                <p @click="toDetail(24)">往年真题</p>
                <a href="https://kz.gzshanen.com/laoxue/839.html">报名网站</a>
            </div>
        </div>

    </div>
</template>

<style scoped>
.home {
    font-family: Arial, sans-serif;
    color: #333;
    padding: 100px 100px 0 100px;
    background: linear-gradient(to bottom, #e8f5e9, #ffffff);
}

.home_main {
    min-height: calc(100vh - 200px);
    background: white;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    /* 设置列和行之间的间隙 */
    padding: 20px;
}

.item {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.item h3 {
    width: 100%;
    text-align : center;
    font-size: 20px;
    color: #4caf50;
    margin-bottom: 15px;
    border-bottom: 2px solid #4caf50;
    padding-bottom: 5px;
}

.item p {
    margin: 8px 0;
    font-size: 16px;
    color: #555;
    cursor: pointer;
    transition: color 0.2s;
}

.item p:hover {
    color: #4caf50;
}

.register-link {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 15px;
    font-size: 14px;
    color: #fff;
    background-color: #4caf50;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.register-link:hover {
    background-color: #45a049;
}
</style>